<template>
  <div class="pass">
    <!-- 通行证管理 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="height">添加新的公告</div>

  <el-form class="notice">
    <div>
      <el-form-item label="公告等级">
        <el-select v-model="formData.level" placeholder="请选择">
          <el-option label="国家级" value="国家级"></el-option>
          <el-option label="都市级" value="都市级"></el-option>
          <el-option label="社区级" value="社区级"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item label="公告标题">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
    </div>
    <el-form-item label="公告内容" prop="content">
      <el-input
        width="100%"
        :rows="10"
        type="textarea"
        v-model="formData.message"
        placeholder="请输入内容"
      ></el-input>
    </el-form-item>
    <div>
      <el-form-item label="发布时间">
        <el-calendar v-model="formData.time">
          <template #dateCell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split("-").slice(1).join("-") }}
              {{ data.isSelected ? "✔️" : "" }}
            </p>
          </template>
        </el-calendar>
        <!-- <el-input v-model="formData.time"></el-input> -->
      </el-form-item>
    </div>

    <el-form-item>
      <el-button color="green" @click="submitForm">发布公告</el-button>
    </el-form-item>
  </el-form>
</template>

    <script>
import { addNoticeApi } from "../api/index1.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      //   formInline: {
      //     user: "",
      //     region: "",
      //   },
      //   ruleForm: {
      //     user: "",
      //     region: "",

      //     desc: "",
      //   },
      formData: {
        id: 0,
        level: "",
        message: "",
        num: 0,
        time: "",
        title: "",
      },
      //   rules: {
      //     desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      //   },
    };
  },
  methods: {
    //查询
    onSubmit() {
      console.log("submit!");
    },
    //提交校验
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    submitForm() {
      console.log(this.formData);
      addNoticeApi(this.formData).then((res) => {
        console.log(res);
          this.formData = {};
          //
                  // 2.提示用户添加成功
        if (res.code == 20000) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
        }
        //   this.$router.back()
         this.$router.push('../views/notice')
      });
    },
  },
};
</script>

    <style lang="less" scoped>
.el-form {
  width: 800px;
}
.notice {
  margin-top: 10px;
}
.height {
  margin-top: 20px;
}
.is-selected {
  color: #1989fa;
}
</style>
